<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/conmmon.css">
 
    <script src="js/jquery.min.js"></script>
</head>
<style>
    .personal{
      height: 100%;
      width: 800px;
      margin-left: 0 auto;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      padding: 30px;
      margin: 0 auto;
    }
  .one1{
    margin-top: 10px;
    font-weight: bolder;
    text-align: center;
  }
  .one{
    font-weight: bolder;
    width: 100px;
    display: inline-block;
    font-size: 20px;
  }
  button{
    margin-top: 20px;
    font-size: 30px;

  }



</style>




<body>

    <div class="personal">
        <div class="one1">
            <span class="one" >昵称:</span>  
            <input type="text" id="name" >
          </div> 
        <div class="one1">
          <span class="one" >所在学校:</span>  
          <input type="text" id="school" >
        </div> 
        <div class="one1">
          <span class="one">手机号码:</span>
          <input type="text" id="phone">  
        </div>   
        <div class="one1"> 
          <span class="one" >邮箱地址:</span>
          <input type="text" id="email">
        </div>    
        <div class="one1">
          <span class="one"> 博客：</span>
          <input type="text"  id="blog">
        </div>
        <div class="one1">
          <span class="one" > github：</span>
          <input type="text" id="github">
        </div>
        <div class="one1">
            <button onclick="sub()">保存</button>
          </div>
          
        
    </div>


    <script>
         //显示个人信息
         function showPersonalInfo(){
          //通过ajax向服务器请求当前登录用户数据
          jQuery.ajax({
            url:"/personal/showpersonalinfo",
            type:"POST",
            data:{},
            success:function(result){
              if(result!=null&&result.code==200&&result.data!=null){

                //在对应位置显示出信息
                jQuery("#name").val(result.data.name);
                jQuery("#school").val(result.data.school);
                jQuery("#phone").val(result.data.phone);
                jQuery("#email").val(result.data.email);
                jQuery("#blog").val(result.data.blog);
                jQuery("#github").val(result.data.github);

              }else{
                alert(result.msg);
              }
            }
          });
        }
        showPersonalInfo();


        function sub(){
            var name = jQuery("#name");
            var school = jQuery("#school");
            var phone = jQuery("#phone");
            var email = jQuery("#email");
            var blog = jQuery("#blog");
            var github = jQuery("#github");

            //向服务器发送数据
            jQuery.ajax({
                url:"/personal/update",
                type:"POST",
                data:{"name":name.val(),"school":school.val(),"phone":phone.val(),"email":email.val(),"blog":blog.val(),"github":github.val()},
                success:function(result){
                    if(result!=null&& result.code==200 && result.data!=null){
                        location.href = "/personal_center.html";
                    }else{
                        alert(result.msg);
                    }
                }
            });



        }





    </script>
 



</body>

</html>
